<template>
  <div class="photo-container">
    <div class="content">
      <div class="img-card-container">
        <div v-for="(item, index) in cards" :key="index" class="card-item">
          <ImgCard :cardList="cards[index]"/>
        </div>
      </div>
    </div>
    <Paginate
        :currentPage="currentPage"
        :totalPage="totalPage"
        @changeCurrentPage="handleCurrentPag"
    />
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onUnmounted} from "vue";
import ImgCard from "@/components/ImgCard/index.vue";
import Paginate from "@/components/Paginate/index.vue";

let cards = ref([]);
let queryObj = ref({
  page: 1,
  size: 6,
  type: 0,
});
let currentPage = ref(0);
let totalPage = ref(0);
const handleCurrentPag = (value: number) => {
  queryObj.value.page = value;
  initData();
};

const initData = () => {
 
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
$inner-shadow: inset 0.2rem 0.2rem 0.5rem #181a2c,
inset -0.2rem -0.2rem 0.5rem #4450ac;

.photo-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .img-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-evenly;

    .card-item {
      width: 30%;
      height: 300px;
    }
  }

  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 3rem 0 3rem;
  }

  .content {
    width: 70%;
    margin-top: 40px;

    .image-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .image-item {
        width: calc(50% - 2rem);
        height: 20rem;

        img {
          cursor: pointer;
          object-fit: cover;
          width: 100%;
          border-radius: 5px;
          height: 100%;
        }
      }
    }
  }
}
</style>
